<template>
	<view class="px-12">
		<z-paging ref="paging" :top-z-index='1' @query="getList" use-page-scroll v-model="list">
			<view v-for="(item,index) in list" :key='index'>
			<view class="rounded-8 mt-8 bg-white p-12 flex flex-x-space-between flex-y-center" v-if="item.status=='2'">
				<view class="flex flex-column">
					<text class="fs-18 fw-600">{{item.package.name}}</text>
					<text class="fs-14 text-grey-4 mt-12">{{item.create_at}}</text>
				</view>
				<text class="fs-17 fw-600 text-red-1">{{item.price}}元</text>
			</view>
			
			<view class="rounded-8 text-grey-4 mt-8 p-12 flex flex-x-space-between flex-y-center bg position-relative overflow-hidden" v-else>
				<view class="h-35 w-90 position-absolute bg-grey-4 item right--34 top-0 text-center flex flex-y-flex-end pb-4 box-sizing">
					<text class="text-white fs-14 pl-19">已失效</text>
				</view>
				<view class="flex flex-column">
					<text class="fs-18 fw-600">{{item.package.name}}</text>
					<text class="fs-14 text-grey-4 mt-12">{{item.create_at}}</text>
				</view>
				<text class="fs-17 fw-600 ">{{item.price}}元</text>
			</view>
			</view>
		</z-paging>

	</view>
</template>

<script setup>
	import { ref } from "vue";
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { $http } from '@/utils'
	import { formatAppLog } from '@dcloudio/uni-app'
	import { onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
	const paging = ref()
	const list = ref([])
	useZPaging(paging)
	const getList = (page, limit) => {
		$http.get('Order/getPackageOrderList', { page: page, limit: limit }).then(res => {
			paging.value.complete(res.data)
		})
	}
</script>

<style scoped>
	.bg {
		background-color: #F4F4F4;
	}
	 .item{
		 transform: rotate(45deg);
	 }
	 .w-90{
		 width: 180rpx;
	 }
</style>